<template>
  <div ref="chartContainer" class="score-chart">
    <div v-if="isEmpty" class="empty-tip">暂无有效成绩数据</div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch,computed } from 'vue';
import * as echarts from 'echarts';

// 图表容器引用
const chartContainer = ref(null);
let chartInstance = null;

// 模拟props数据（实际使用时通过props传入）
const props = defineProps({
  records: {
    type: Array,
    required: true,
    default: () => []
  }
});

// 是否为空数据
const isEmpty = computed(() => {
  return processedData.value.length === 0;
});

// 处理原始数据
const processedData = computed(() => {
  return props.records
      .filter(item => item.score && item.submittedAt) // 筛选有效数据
      .map(item => ({
        timestamp: new Date(item.submittedAt).getTime(), // 转换为时间戳
        score: Number(item.score.toFixed(1)) // 保留一位小数
      }))
      .sort((a, b) => a.timestamp - b.timestamp); // 按时间排序
});

// 初始化图表配置
const initChart = () => {
  const data = processedData.value;

  // 如果没有数据，直接返回
  if (data.length === 0 || !chartContainer.value) return;

  // 动态调整图表配置
  const option = {
    tooltip: {
      trigger: 'axis',
      formatter: (params) => {
        const date = new Date(params[0].value[0]);
        return `
          <strong>${date.toLocaleDateString()}</strong><br/>
          ${date.toLocaleTimeString('zh', { hour12: false })}<br/>
          <span style="color:${params[0].color}">●</span> 分数: ${params[0].value[1]}分
        `;
      }
    },
    xAxis: {
      type: 'time',
      name: '提交时间',
      axisLabel: {
        formatter: (value) => {
          return echarts.time.format(value, data.length <= 5 ? '{yyyy}-{MM}-{dd}' : '{MM}-{dd}', false);
        },
        interval: data.length <= 5 ? 0 : 'auto' // 少于5个点时显示所有时间标签
      },
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      name: '分数',
      min: 0,
      max: 100,
      axisLabel: {
        formatter: '{value} 分'
      },
      splitLine: {
        show: data.length > 1 // 单数据点隐藏网格线
      }
    },
    series: [{
      name: '成绩',
      type: 'line',
      showSymbol: true,
      symbolSize: data.length <= 5 ? 10 : 6, // 少于5个点时放大标记点
      data: data.map(item => [item.timestamp, item.score]),
      itemStyle: {
        color: '#1890ff' // 主色调
      },
      areaStyle: data.length > 1 ? { // 单数据点不显示面积
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(24, 144, 255, 0.4)' },
          { offset: 1, color: 'rgba(24, 144, 255, 0.05)' }
        ])
      } : null,
      lineStyle: {
        width: data.length <= 5 ? 3 : 2 // 少于5个点时加粗线条
      }
    }],
    grid: {
      left: '3%',
      right: '4%',
      bottom: '8%',
      containLabel: true
    },
    dataZoom: data.length > 5 ? [{ // 数据量多时启用缩放
      type: 'inside',
      start: 0,
      end: 100
    }] : [],
    graphic: data.length === 1 ? [{ // 单数据点特殊处理
      type: 'text',
      left: 'center',
      top: 'middle',
      style: {
        text: `当前分数：${data[0].score}分`,
        fontSize: 16,
        fill: '#666'
      }
    }] : null
  };

  // 初始化或更新图表
  if (!chartInstance) {
    chartInstance = echarts.init(chartContainer.value);
  }
  chartInstance.setOption(option);
};

// 响应窗口变化
const handleResize = () => {
  chartInstance?.resize();
};

// 监听数据变化
watch(processedData, () => {
  if (chartInstance) {
    chartInstance.dispose(); // 销毁旧实例
  }
  initChart(); // 重新初始化图表
}, { deep: true });

onMounted(() => {
  initChart(); // 初始化图表
  window.addEventListener('resize', handleResize); // 监听窗口大小变化
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize); // 移除事件监听
  chartInstance?.dispose(); // 销毁图表实例
});
</script>

<style scoped>
.score-chart {
  position: relative;
  width: 100%;
  height: 500px;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.empty-tip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #999;
  text-align: center;
}
</style>
